<template>
    <div class="qilin-leftMenu qilin-mt-12">
        <el-row>
            <el-col>
                <el-menu class="el-menu-vertical-demo"
                    :default-active="defaultRouteName"
                    router
                >
                    <template v-for="item in $route.matched[0].children" :key="item.meta.title">
                        <el-menu-item :index="item.path" v-if="!item.children || item.children.length === 0">
                            <i :class="item.meta.icon"></i>
                            <template v-slot:title>
                                <span>{{item.meta.title}}</span>
                            </template>
                        </el-menu-item>
                        <el-sub-menu v-else :index="item.path">
                            <template v-slot:title>
                                <i :class="item.meta.icon"></i>
                                <span>{{item.meta.title}}</span>
                            </template>
                            <template v-for="(citem) in item.children" :key="citem.meta.title">
                                <el-menu-item :index="citem.path" v-if="!citem.children || citem.children.length === 0">
                                    <template v-slot:title>
                                        <span>{{citem.meta.title}}</span>
                                    </template>
                                </el-menu-item>
                                <el-sub-menu v-else>
                                    <template v-slot:title>
                                        <span>{{citem.meta.title}}</span>
                                    </template>
                                    <template v-for="(ccitem) in citem.children" :key="ccitem.meta.title">
                                        <el-menu-item :index="ccitem.path">
                                            <template v-slot:title>
                                                <span>{{ccitem.meta.title}}</span>
                                            </template>
                                        </el-menu-item>
                                    </template>
                                </el-sub-menu>
                            </template>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    computed:{
        // 默认为当前路由
        defaultRouteName(){
            return this.$route.path;
        }
    },
    methods:{

    },
    mounted(){
        // console.log(this.$route)
    }
}
</script>

<style lang="scss" scoped>
.qilin-leftMenu{
    width:14.286rem;
    transition:width .7s linear 0s;
    background-color:$color-theme-common-dark;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    z-index:2;
    >.el-row{
        height:100%;
        >.el-col{
            height:100%;
            >.el-menu.el-menu-vertical-demo{
                height:100%;
                border-right:none;
                background-color:$color-theme-common-dark;
                overflow-y:auto;
                padding-bottom:8rem;
                -ms-overflow-style:none; //ie下隐藏滚动条
                scrollbar-width:none; //火狐下隐藏滚动条
                &::-webkit-scrollbar{ //谷歌下隐藏滚动条
                    display:none;
                }
                .el-menu-item.is-active{
                    color: $color-text-title-checked;
                    >i{
                        color:$color-text-title-checked;
                    }
                    &:focus{
                        background-color:rgba(255,255,255,0.6);
                    }
                }
                :deep(.el-sub-menu .el-menu){
                    background:$color-theme-common-light;
                }
                :deep(.el-sub-menu__title,.el-menu-item){
                    color :$color-text-title;
                    >i{
                        color:$color-text-title;
                    }
                }
                .el-menu-item:hover,:deep(.el-sub-menu__title:hover){
                    background-color:rgba(255,255,255,0.5);
                }
                .el-menu-item i{
                    color:inherit;
                }
            }
            a{
                text-decoration:none;
            }
        }
    }
}
</style>
